<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2022-01-14 13:36:46
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-12 14:52:18
 * @FilePath: /app-template-uni-upgrade/src/pagesRayTemplate/pages/form/index.vue
 * @Description: 表单功能
 * Copyright (c) 2023 by ray ray.chin@163.com, All Rights Reserved.
-->
<template>
    <view class="main"
    >
        <template v-for="(item, index) in formSchemaArray">
            <view :key="`formSchemaArray${index}`">
                <uni-section
                    v-if="item.formTitle"
                    :title="item.formTitle"
                    sub-title=""
                    type="line"
                ></uni-section>
                <component
                    :ref="`rayForm${index}`"
                    :is="'ray-form-schema'"
                    v-model="item.formData"
                    :formSchema="item.formSchema" />
            </view>
        </template>
        
        <button @click="onSubmit">Submit</button> 
    </view>
</template>

<script>
// 引入所有需要的动态组件
const components = require.context(
    // 组件所在目录的相对路径
    "@/components/ray-form",
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\w+.vue$/
);
const comObj = {};
components.keys().forEach(fileName => {
    // 获取文件名
    var names = fileName.split("/").pop().replace(/.\w+$/, "");
    // 获取组件配置
    const comp = components(fileName);
    // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
    comObj[names] = comp.default || comp;
});

const moduleJs = require.context(
    // js文件所在目录的相对路径
    "./",
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\w+.js$/
);
const modules = moduleJs.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = moduleJs(modulePath)
    modules[moduleName] = value.default
    return modules
}, {});
export default {
    components: {
        ...comObj,
    },
    data() {
        return {
            formSchemaArray: [],
        };
    },
    computed: {
    },
    onLoad() {
    },
    onShow() {
    },
    mounted() {
    },
    async created() {
        let __this = this;
        console.error('created', modules);
        this.formSchemaArray = [];
        for (let key in modules) {
            let obj = (modules[key])["formJson"];
            console.warn('obj', obj);
            if (obj["formSchemaArray"] && Array.isArray(obj["formSchemaArray"])) {
                this.formSchemaArray = this.formSchemaArray.concat(obj["formSchemaArray"]);
            }
        }
        console.error('formSchemaArray', this.formSchemaArray);
    },
    watch: {
    },
    methods: {
        onSubmit(e) {  
            console.log(e)
            this.formSchemaArray.forEach((formSchema, index) => {
                console.log(this.$refs[`rayForm${index}`]);
                this.$refs[`rayForm${index}`][0].validate().then(res => {
                    console.log('可以提交', res);
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped >
uni-page-body {
    width: 100vw;
    overflow: hidden;
    background: #fff;
}

.main {
    height: 100%;
    width: 100%;
    padding: 15rpx;
    position: relative;
}
</style>